<template>
	<div class="page_wrap">
		<div class="tabs">
			<p class="store_name">注册时间：2016-05-16</p>
			<ul>
				<li>
					<div class="li_left">
						<i class="iconfont icon-yingxiao"></i>
					</div>
					<div class="li_right">
						<p>今日销量</p>
						<strong>￥999</strong>
					</div>
				</li>
				<li>
					<div class="li_left">
						<i class="iconfont icon-yingxiao"></i>
					</div>
					<div class="li_right">
						<p>本月销量</p>
						<strong>￥1005531</strong>
					</div>
				</li>
				<li>
					<div class="li_left">
						<i class="iconfont icon-huiyuan"></i>
					</div>
					<div class="li_right">
						<p>会员总数</p>
						<strong>6500</strong>
					</div>
				</li>
				<li>
					<div class="li_left">
						<i class="iconfont icon-user"></i>
					</div>
					<div class="li_right">
						<p>今日注册会员</p>
						<strong>16</strong>
					</div>
				</li>
				<li>
					<div class="li_left">
						<i class="iconfont icon-zhichutubiao-01"></i>
					</div>
					<div class="li_right">
						<p>本月支出</p>
						<strong>￥35100</strong>
					</div>
				</li>
				<li>
					<div class="li_left">
						<i class="iconfont icon-duanxin"></i>
					</div>
					<div class="li_right">
						<p>本月短信</p>
						<strong>630</strong>
					</div>
				</li>
				<li>
					<div class="li_left">
						<i class="iconfont icon-shangpin"></i>
					</div>
					<div class="li_right">
						<p>商品总数</p>
						<strong>200005</strong>
					</div>
				</li>
			</ul>
		</div>
		<!---->
		<div class="calendar_view">
			<el-calendar v-model="value"></el-calendar>
		</div>

		<!---->
		<div class="chart_view">
			<div id="myChart" :style="{width:'100%',height:'600px'}"></div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: new Date(),
			}
		},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				var myChart = this.$echarts.init(document.getElementById('myChart'));
				let options = {
					title: {
						text: '未来一周气温变化', //图表顶部的标题 
						subtext: '纯属虚构' //副标题
					},
					tooltip: { //鼠标悬浮框的提示文字
						trigger: 'axis'
					},
					legend: {
						data: ['最高气温', '最低气温']
					},
					xAxis: [{ //x轴坐标数据
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{ //y轴坐标数据
						type: 'value',
						axisLabel: {
							formatter: '{value} °C'
						}
					}],
					series: [ //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
						{
							name: "最高气温",
							type: "line", //pie->饼状图  line->折线图  bar->柱状图
							data: [11, 11, 15, 13, 12, 13, 10],
						},
						{
							name: "最低气温",
							type: "line", //pie->饼状图  line->折线图  bar->柱状图
							data: [1, -2, 2, 5, 3, 2, 0],
						}
					]
				}
				myChart.setOption(options);
			}, ///
		}
	};
</script>

<style lang="scss" scoped>
	.page_wrap {
		height: 100%;
	}
	
	.tabs {
		margin: 10px;
		box-shadow: 1px 1px 10px #999;
		border-radius: 10px;
		.store_name {
			padding: 10px 20px 30px;
			color: #409EFF;
			font-size: 18px;
		}
		ul {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			li {
				width: 15%;
				min-width: 200px;
				height: 100px;
				border-radius: 10px;
				box-shadow: 1px 1px 10px #999;
				margin: 0 20px 30px;
				padding: 0 20px;
				background: blue;
				display: flex;
				justify-content: space-between;
				align-items: center;
				transition: all 0.5s;
				.li_left {
					i {
						font-size: 34px;
						color: #fff;
					}
				}
				.li_right {
					p {
						color: #fff;
						font-size: 16px;
						text-align: right;
					}
					strong {
						margin: 4px 0 0 0;
						display: block;
						text-align: right;
						font-size: 24px;
						color: #fff;
					}
				}
				&:nth-child(1) {
					background: #00d0ffd4;
				}
				&:nth-child(2) {
					background: #2700ff9c;
				}
				&:nth-child(3) {
					background: #ff8100;
				}
				&:nth-child(4) {
					background: #004fff9e;
				}
				&:nth-child(5) {
					background: #67c23a;
				}
				&:nth-child(6) {
					background: #ff0000b8;
				}
				&:nth-child(7) {
					background: #cc00ff73;
				}
				&:hover {
					transform: scale(1.1, 1.1);
				}
			}
		}
	}
	
	.calendar_view {
		margin: 10px;
		padding: 10px 0;
		box-shadow: 1px 1px 10px #999;
		border-radius: 10px;
	}
	
	.chart_view {
		margin: 10px;
		padding: 10px 0;
		box-shadow: 1px 1px 10px #999;
		border-radius: 10px;
	}
</style>